<template>
  <div class="operate">
    <h1>操作日志</h1>
    
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="searchForm.targetName" placeholder="学生/教师名称"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="searchForm.targetNum" placeholder="学号/教师编号"></el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.operateType" placeholder="请选择操作类型">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="新增" :value="1"></el-option>
            <el-option label="修改" :value="2"></el-option>
            <el-option label="删除" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对象类型">
          <el-select v-model="searchForm.targetType" placeholder="请选择对象类型">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="学生" :value="1"></el-option>
            <el-option label="教师" :value="2"></el-option>
            <el-option label="管理员" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="info" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%"
      height="calc(100vh - 280px)"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="targetName" label="名称" min-width="100"></el-table-column>
      <el-table-column prop="targetNum" label="编号" min-width="100"></el-table-column>
      <el-table-column label="操作类型" min-width="80">
        <template slot-scope="scope">
          <el-tag :type="getOperateTypeTag(scope.row.operateType)">
            {{ getOperateTypeText(scope.row.operateType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="对象类型" min-width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.targetType === 1 ? 'info' : scope.row.targetType === 2 ? 'success' : 'primary'">
            {{ scope.row.targetType === 1 ? '学生' : scope.row.targetType === 2 ? '教师' : '管理员' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="操作内容" min-width="120"></el-table-column>
      <el-table-column prop="createTime" label="操作时间" min-width="180"></el-table-column>
    </el-table>
    
    <!-- 分页控件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "OperateDemo",
  data() {
    return {
      // 表格数据
      tableData: [],
      // 加载状态
      loading: false,
      // 分页参数
      pageSize: 10,
      pageNum: 1,
      total: 0,
      // 搜索表单
      searchForm: {
        targetName: "",
        targetNum: "",
        operateType: null,
        targetType: null,
        startTime: "",
        endTime: ""
      },
      // 时间范围
      timeRange: []
    };
  },
  methods: {
    // 处理查询
    handleSearch() {
      // 处理时间范围
      if (this.timeRange && this.timeRange.length === 2) {
        this.searchForm.startTime = this.timeRange[0];
        this.searchForm.endTime = this.timeRange[1];
      } else {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      }
      
      this.pageNum = 1; // 重置到第一页
      this.loadData();
    },
    
    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        targetName: "",
        targetNum: "",
        operateType: null,
        targetType: null,
        startTime: "",
        endTime: ""
      };
      this.timeRange = [];
      this.handleSearch();
    },
    
    // 加载数据
    loadData() {
      this.loading = true;
      
      this.$http.post("/log/listPage", {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        param: this.searchForm
      })
      .then(res => res.data)
      .then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.tableData = res.data || [];
          this.total = res.total || 0;
        } else {
          this.$message.error("获取日志数据失败: " + res.msg);
        }
      })
      .catch(err => {
        this.loading = false;
        console.error("请求错误:", err);
        this.$message.error("网络请求失败，请检查网络连接");
      });
    },
    
    // 处理每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    
    // 处理当前页变化
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    
    // 获取操作类型文本
    getOperateTypeText(type) {
      switch (type) {
        case 1: return "新增";
        case 2: return "修改";
        case 3: return "删除";
        default: return "未知";
      }
    },
    
    // 获取操作类型标签样式
    getOperateTypeTag(type) {
      switch (type) {
        case 1: return "success";
        case 2: return "warning";
        case 3: return "danger";
        default: return "info";
      }
    }
  },
  created() {
    // 组件创建时加载数据
    this.loadData();
  }
};
</script>

<style scoped>
.operate {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.search-container {
  margin-bottom: 15px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.el-table {
  flex: 1;
  overflow: hidden;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
  padding: 10px 0;
}

/* 确保文本在单元格中不会被截断 */
::v-deep .el-table .cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>